﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="expires" content="0">
        <title>DotaGrid</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body class="container-fluid">

        <span class="label label-default pull-right" style="margin-top: 10px;">6.82+ / Techies now included</span>
        
        <h1>DotaGrid</h1>
        
        <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
            <p><strong>Important!</strong> DotaGrid is in "alpha" stage, no guarantees are made that you'll be able to load this code in later versions of DotaGrid. Use at own risk.</p>
            <p><strong>Warning!</strong> DotaGrid probably only works for 1920 x 1080 resolutions, and may screw up your settings on other resolutions.</p>
        </div>
        
        <hr />
        
        <div class="row">
            <div class="col-xs-12 form-inline">
                <div class="form-group">
                    <label for="rows">Rows</label>
                    <input type="number" class="form-control" data-bind="value: rowCount" />
                </div>
                <div class="form-group">
                    <label for="cols">Columns</label>
                    <input type="number" class="form-control" data-bind="value: colCount" />
                </div>
                <div class="form-group">
                    <button class="btn btn-default" data-bind="click: resetGrid">Reset grid with new dimensions</button>
                </div>
                <div class="form-group">
                    ...... Or
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            Load Template <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#" data-bind="click: loadDefault">Dota 2 Default Layout</a></li>
                            <li><a href="#" data-bind="click: loadAlphabetically">Arranged Alphabetically</a></li>
                            <li><a href="#" data-bind="click: loadColorBased">Arranged by Color</a></li>
                            <li><a href="#" data-bind="click: loadRoleAndAttack">Arranged by Role and Ranged/Melee</a></li>
                            <li><a href="#" data-bind="click: loadMostPlayed">Arranged by Most Played in 6.81b</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <hr />
        
        <p>Click a cell. Then click another to switch them.</p>
        
        <div class="row">
            <div class="col-xs-12">
                <table class="dotaGrid">
                    <tbody data-bind="foreach: rows">
                        <tr data-bind="foreach: cells">
                            <td data-bind="style: { width: $root.cellWidthPx, height: $root.cellHeightPx },
                                           css: { active: $root.activeCell() === $data, dimmed: $root.isDimmed($data) },
                                           click: $root.activateCell">
                                <!-- ko with: hero -->
                                <img data-bind="attr: {title: tooltip, src: imageSrc},
                                                style: { width: $root.cellWidthPx, height: $root.cellHeightPx }" />
                                <!-- /ko -->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 form-inline">
                <div class="form-group">
                    <label for="freeTextFilter">Highlight by name:</label>
                    <input id="freeTextFilter" type="text" class="form-control input-sm" placeholder='"snip", "pu", etc' data-bind="value: freeTextFilter, valueUpdate: 'afterkeydown'" />
                </div>
            </div>
        </div>
        
        <hr />

        <div class="row">
            <div class="col-sm-4">
                <h4><span class="glyphicon glyphicon-floppy-disk"></span> Dota Layout File Format</h4>
                <p>Copy-paste to e.g. <code>/dota/cfg/layouts/yourfilename.txt</code>. File has to be in <strong>ANSI encoding</strong> (often the default).</p>
                <textarea class="form-control gridfile" data-bind="value: gridfile" spellcheck="false"></textarea>
            </div>
            <div class="col-sm-4">
                <h4><span class="glyphicon glyphicon-export"></span> Save DotaGrid</h4>
                <p>Save the code below to load it later on. In this alpha version you'll have to use the clipboard and your favorite text editor.</p>
                <div class="form-group">
                    <textarea class="form-control savefile" data-bind="value: fileToSave"></textarea>
                </div>
            </div>
            <div class="col-sm-4">
                <h4><span class="glyphicon glyphicon-import"></span> Load DotaGrid</h4>
                <p>Load a saved grid. Paste a saved DotaGrid (text you saved from the box next to this one) into this area below and hit "Load Grid":</p>
                <div class="form-group">
                    <textarea class="form-control loadfile" data-bind="value: fileToLoad"></textarea>
                </div>
                <p><button class="btn btn-default" data-bind="click: loadDgFile">Load Grid</button></p>
            </div>
        </div>
        
        <hr />
        
        <footer><small>
            Tool and <a href="https://code.google.com/p/dotagrid/">code</a> licensed under <a href="http://opensource.org/licenses/mit-license.php">The MIT License</a>. Dota2 (all related trademarks and material) is owned by <a href="http://www.dota2.com">Valve</a>. For questions contact me at <abbr title="A simple attempt at fooling e-mail-address-spiders. Change it to a true mail address yourself ;).">dotagrid (at) jeroenheijmans (dot) nl</abbr> (though the tool is provided "AS IS", I give no guarantees about anything; <a href="https://code.google.com/p/dotagrid/">the code's open source</a> though if you want to change it yourself).
        </small></footer>
        
        <br />
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/knockout-3.1.0.js"></script>
        <script src="js/tempHeroesJson.js"></script>
        <script src="js/myMonolithicApp.js"></script>
    </body>
</html>